<template>
    <div class="body">
        <div class="order-status">
            <i class="iconfont status-icon" :class="getStatus($store.getters.order_detail,'icon')"></i>
            <span>{{getStatus($store.getters.order_detail,'text')}}</span>
        </div>
        <div class="address-content">
            <div class="add-address">
                <p class="address">
                    {{$store.getters.order_detail.province}}{{$store.getters.order_detail.city}}{{$store.getters.order_detail.area}}{{$store.getters.order_detail.address}}
                </p>
                <p class="name">
                    {{$store.getters.order_detail.arrive_name}}
                     {{$store.getters.order_detail.arrive_phone}}
                </p>
            </div>
        </div>
        <div class="order-item">
            <van-cell :title="$store.getters.order_detail.goods_data.center_name"/>
            <van-card
            :num="$store.getters.order_detail.goods_data.num"
            :price="$store.getters.order_detail.goods_data.price"
            :desc="'子订单号:'+$store.getters.order_detail.order_no"
            :title="$store.getters.order_detail.goods_data.name"
            :thumb="$store.getters.order_detail.goods_data.image"
            >
            </van-card>
        </div>
        <div class="btn-group" v-if="($store.getters.order_detail.status == 4 || $store.getters.order_detail.status == 3)&&$store.getters.order_detail.is_pay == 1">
                <van-button size="small" v-if="$store.getters.order_detail.status == 4&&$store.getters.order_detail.is_pay == 1" @click="()=>{$router.push({path:'/comment',query:{product_id:$store.getters.order_detail.goods_data.id,oid:$store.getters.order_detail.id}})}">评论</van-button>
                <van-button size="small" v-if="$store.getters.order_detail.status == 3&&$store.getters.order_detail.is_pay == 1" @click="receiving($store.getters.order_detail.id)">确认收货</van-button>
                <van-button size="small" v-if="$store.getters.order_detail.status == 3&&$store.getters.order_detail.is_pay == 1" @click="refund($store.getters.order_detail.order_no)">申请退款</van-button>
        </div>
    </div>
</template>
<script>
import { GoodsReceipt } from '../ajax'
import { Toast } from 'vant'
export default {
    created(){
        console.log(this.$store.getters.order_detail);
    },
    methods:{
        getStatus(order,type){
            switch(order.status){
                case 0:
                    if(type == 'icon'){
                        if(!order.is_pay){
                            return 'icon-weizhifu'
                        }else{
                            return 'icon-weichuku';
                        }
                    }else{
                        if(!order.is_pay){
                            return '订单未支付';
                        }else{
                            return '订单未出库';
                        }
                    }
                    
                    break;
                case 1:
                    if(type == 'icon'){
                        return 'icon-daifahuo'
                    }else{
                        return '订单已出库,待发货';
                    }
                    
                    break;
                case 2:
                    if(type == 'icon'){
                        return 'icon-wuliuicon'
                    }else{
                       return '订单已发货'; 
                    }
                    
                    break;
                case 3:
                    if(type == 'icon'){
                        return 'icon-daishouhuo'
                    }else{
                       return '订单已送达'; 
                    }
                    
                    break;
                case 4:
                    if(type == 'icon'){
                        return 'icon-yiqianshou'
                    }else{
                        return '订单已签收';
                    }
                    
                    break;
                case 5:
                    if(type == 'icon'){
                        return 'icon-pinglun'
                    }else{
                       return '订单待评价'; 
                    }
                    
                    break;
                case 6:
                    if(type == 'icon'){
                        return 'icon-duihao'
                    }else{
                       return '订单已完成'; 
                    }
                    
                    break;
                case -1:
                    if(type == 'icon'){
                        return 'icon-tuikuanzhong'
                    }else{
                        return '订单申请退款中';
                    }
                    
                    break;
                case -2:
                    if(type == 'icon'){
                        return 'icon-tuihuotuikuan'
                    }else{
                        return '订单已退货退款';
                    }
                    
                    break;
                case -3:
                    if(type == 'icon'){
                        return 'icon-yituikuan'
                    }else{
                       return '订单已退款'; 
                    }
                    break;
                case -4:
                    if(type == 'icon'){
                        return 'icon-quxiao'
                    }else{
                        return '订单已取消';
                    }
                    break;
                case 6:
                    if(type == 'icon'){
                        return 'icon-jujuetuikuan'
                    }else{
                      return '订单拒绝退款';  
                    }
                    break;
                default:
                    if(type == 'icon'){
                        return 'icon-weizhizhuangtai'
                    }else{
                        return '未获取到订单状态'   
                    }
            }
        },
        receiving(oid){
            const data = {
                oid,
                uid:this.$store.getters.wxUserInfo.id
            }
            GoodsReceipt(data).then(res=>{
                Toast('收货成功');
                history.go(0);
            })
        },
        refund(order_no){
            this.$router.push({path:'/refund',query:{order_no}})
        },
    }
}
</script>
<style lang="scss" scoped>
    $gray:#eee;
    $white:#fff;
    .body{
        background: #eee;
        height: calc(100vh - 3rem);
        .order-status{
            width: 100%;
            height: 6rem;
            background:url('../assets/userCenter_bg.png') no-repeat;
            background-size: 100% 100%;
            text-align: center;
            color: $white;
            font-size: 1.4rem;
            font-weight: 500;
            display: flex;
            padding-top: 2rem;
            align-items: flex-start;
            justify-content: center;
            .status-icon{
                font-size: 2rem;
                margin: 0 0.2rem;
            }
        }
        .address-content{
            background: $white;
            padding: 3%;
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
            margin-top: -2rem;
            .address{
                padding:0.4rem 0;
                font-size: 1.4rem;
                font-weight: 800;
                line-height: 1.4rem;
            }
            .name{
                line-height: 2rem;
            }
        }
        .order-item{
            margin-top: 0.6rem;
            .van-card{
                margin-top: 0.1rem;
            }
        }
        .btn-group{
            width: 100%;
            height: 3rem;
            background: $white;
            position: absolute;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content:flex-end;
            button{
                margin: 0 0.4rem;
            }
        }
    }
</style>